<template>
    <div>
        <el-dialog title="添加或修改部门信息" :visible.sync="dialogFormVisible">
            <el-form :model="form" label-width="100px">
                <el-form-item label="部门编号" >
                    <el-input v-model="form.sn" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门名称" >
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门状态" >
                    <el-radio v-model="form.state" label="0">正常</el-radio>
                    <el-radio v-model="form.state" label="1">禁用</el-radio>
                </el-form-item>
                <el-form-item label="部门管理员" >
                    <el-input v-model="form.managerId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上级部门" >
                    <!-- 级联选择器中，props几个属性的作用：emitPath:获取的v-model的值只是最后一个选项；label:重新定义显示的级联的字符串是我们定义的key=name的值 -->
                    <el-cascader v-model="form.parentId"
                            :options="options"
                            :props="{ checkStrictly: true ,emitPath:false,label:'name',value:'id'}"
                            clearable>
                    </el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdateDept">确 定</el-button>
            </div>
        </el-dialog>


        <el-form style="margin-top: 20px" size="mini" :inline="true" :model="searchParam" class="demo-form-inline">
            <el-form-item label="部门名称">
                <el-input v-model="searchParam.name" placeholder="请输入部门名称"></el-input>
            </el-form-item>
            <el-form-item label="上级部门">
                <el-select clearable v-model="searchParam.parentId" placeholder="请选择上级部门">
                    <el-option
                        v-for="item in parentDepts"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">

                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="部门管理员">
                <el-select clearable  placeholder="请选择部门管理员">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="toQuery">查询</el-button>
                <el-button type="success" @click="dialogFormVisible = true">新增</el-button>
                <el-button type="danger" @click="batchDel">批量删除</el-button>
            </el-form-item>
        </el-form>
        <el-table
                border
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="主键ID"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="sn"
                    label="编号">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="部门名称">
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="部门状态">
                <!-- 如果需要对表中某个字段进行显示内容的切换，则可以使用<template>语法进行转换 -->
                <!-- 分析：如果是0正常；如果是1：禁用-->
                <template slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.state == 0" type="success">正常</el-tag>
                    <el-tag size="mini" v-if="scope.row.state == 1" type="danger">禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="managerName"
                    label="部门经理">
            </el-table-column>
            <el-table-column
                    prop="parentName"
                    label="上级部门">
            </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 20px"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="searchParam.currPage"
                       :page-sizes="[1, 2, 3, 4]"
                       :page-size="searchParam.pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                options: [],
                form:{},//这个对象用于保存表单提交时的数据
                dialogFormVisible:false,
                searchParam: {
                    currPage:1,
                    pageSize:10
                },
                total:0,
                tableData:[],
                parentDepts:[],
                multiIdSelcts:[] // 用于保存复选框选中的值
            }
        },
        methods:{
            batchDel(){//批量删除时，选中的数据已经保存在了multiIdSelcts
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //在进行批量删除时，如果只需要传递选中的数据的主键ID,则可以在提交请求之前，进行一下数据处理
                    let ids = this.multiIdSelcts.map(obj=> { //es6的循环新特性方法
                        return obj.id;
                    })

                    this.$http.post('/dept/batchdel',ids).then(res=>{
                        if (res.data && res.data.success){
                            //刷新界面
                            this.toQuery();
                        }
                    })
                }).catch(() => {
                    // this.$message({
                    //     type: 'info',
                    //     message: '已取消删除'
                    // });
                });



            },
            treeDept(){
                this.$http.get("/dept/treedept").then(res=>{
                    this.options = res.data.data;
                })
            },
            saveOrUpdateDept(){//添加或修改部门信息
                this.$http.post('/dept/saveorupdate',this.form).then(res=>{

                })
            },
            handleSizeChange(val) {
                this.searchParam.pageSize = val;
                this.toQuery();
            },
            handleCurrentChange(val) {
                this.searchParam.currPage = val;
                this.toQuery();
            },
            handleSelectionChange(val){//复选框值发生变化时，会触发当前方法
                console.log(">>>>>val="+JSON.stringify(val))
                this.multiIdSelcts = val;
            },
            toQuery() {//查询方法
                this.$http.post('/dept/pagelist',this.searchParam).then(res=>{
                    this.tableData = res.data.data.rows;
                    this.total = res.data.data.total;
                })
            },
            //提供一个查询方法：查询部门表中所有的部门列表，然后给前端进行【上级部门的查询显示】
            findParentDept(){
                this.$http.get('/dept').then(res=>{
                    this.parentDepts = res.data.data;
                })
            }
        },
        mounted() {
            //在页面一加载的时候，就会去查询上级部门列表
            this.findParentDept();

            this.toQuery();

            this.treeDept();
        }


    }
</script>